import React, { Component } from 'react';
import './style.css'
// import { Redirect } from 'react-router-dom';
import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts' 
import request from '../../request';

interface CourseItem {
  title: string;
  desc: string;
}
interface DataStructure {
  [key: string]: CourseItem[];
}

interface State {
  loading: boolean;
  isLogin: boolean;
  data: DataStructure;
}

class KeyWord extends Component{
  state:State = {
    loading: true,
    isLogin: true,
    data: {}
  }
  componentDidMount() {
    request.get('/api/isLogin').then(res => {
      const data: boolean = res.data;
      if (!data) {
        this.setState({
          isLogin: false,
          loading: false
        });
      } else {
        this.setState({
          loading: false
        });
      }
    });

    request.get('/api/showWenCaiData').then(res => {
      const data = res.data;
      if (data) {
        this.setState({ data });
      }
    });
  }

  getOption: () => echarts.EChartOption = () => {
    const { data } = this.state;
    interface item {
      name: string;
      value: string;
    }
    const obj:item = {}
    const plantCap:item[] = []
    for(let key in data) {
      data[key].forEach(item => {
        obj.name = item.title
        obj.value = item.desc
        plantCap.push(obj)
      })

    }
    // var plantCap = [{
    //   name: '居住',
    //   value: 'Settlements'
    // }, {
    //   name: '行政',
    //   value: 'administration'
    // }, {
    //   name: '文化',
    //   value: 'Culture'
    // }, {
    //   name: '医疗',
    //   value: 'hospital '
    // }, {
    //   name: '教育',
    //   value: 'education '
    // }, {
    //   name: '交通',
    //   value: 'hospital'
    // }, {
    //   name: '产业',
    //   value: 'industry'
    // }];

    var datalist = [{
      offset: [50, 50],
      symbolSize: 120,
      opacity: .95,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#29c0fb'
      }, {
          offset: 1,
          color: '#2dc5b9'
      }]),
    }, {
      offset: [38, 70],
      symbolSize: 95,
      opacity: .95,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#35d17e'
      }, {
          offset: 1,
          color: '#49ddb2'
      }]),
    }, {
      offset: [23, 43],
      symbolSize: 90,
      opacity: .95,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#e5d273'
      }, {
          offset: 1,
          color: '#e4a37f'
      }]),
    }, {
      offset: [44, 26],
      symbolSize: 90,
      opacity: .95,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#277aec'
      }, {
          offset: 1,
          color: '#57c5ec'
      }]),
    }, {
      offset: [80, 58],
      symbolSize: 65,
      opacity: .95,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#e54948'
      }, {
          offset: 1,
          color: '#f08456'
      }]),
    }, {
      offset: [76, 36],
      symbolSize: 68,
      opacity: .7,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#11c46e'
      }, {
          offset: 1,
          color: '#f08456'
      }]),
    }, {
      offset: [64, 75],
      symbolSize: 65,
      opacity: .68,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#ff4141'
      }, {
          offset: 1,
          color: '#ff8989'
      }]),
    }];
    var datas: any = [];
    for (var i = 0; i < plantCap.length; i++) {
      var item = plantCap[i];
      var itemToStyle = datalist[i];
      datas.push({
          name: item.name + '\n' + item.value,
          value: itemToStyle.offset,
          symbolSize: itemToStyle.symbolSize,
          label: {
              normal: {
                  textStyle: {
                      fontSize: 18,
                      fontWeight: 800,
                      lineHeight: 22,
                  }
              }
          },
          itemStyle: {
              normal: {
                  color: itemToStyle.color,
                  opacity: itemToStyle.opacity
              }
          },
      })
    }
    return {
      backgroundColor: '#12468500',
      grid: {
        show: false,
        top: 10,
        bottom: 10
      },
      xAxis: [{
        gridIndex: 0,
        type: 'value',
        show: false,
        min: 0,
        max: 100,
        nameLocation: 'middle',
        nameGap: 5
      }],
      yAxis: [{
        gridIndex: 0,
        min: 0,
        show: false,
        max: 100,
        nameLocation: 'middle',
        nameGap: 30
      }],
      series: [{
        type: 'effectScatter',
        hoverAnimation: true,
        label: {
          normal: {
            show: true,
            formatter: '{b}',
            color: '#fff',
            textStyle: {
              fontSize: '20'
            }
          },
        },
        itemStyle: {
            normal: {
              color: '#00acea'
            }
        },
        data: datas
      }]
    };
  }

  render() {
    return (
      <div className="wraper">
        <div className="wrapper-ball">
          <ReactEcharts option={this.getOption()} />
        </div>
      </div>
    )
  }
}

export default KeyWord
